<template>
    <div class="img-upload-container">
        <div class="img-upload-button" v-if="wxReadyOk" @click="chooseImage">
            <van-icon name="plus" />
        </div>
        <div class="img-upload-button" v-else>
            <van-icon name="plus" />
            <input type="file" @change="videoFile" class="img-upload-file">
        </div>
        <wechat :callback="wxReadyOkMethod" />
    </div>
  </template>
  <script>
  import {ImagePreview,Icon} from 'vant';
  import { findIndex } from 'lodash';
  export default {
    name: "imgUpload",
    props:{
        src:{
            type
        }
    },
    components: {
      [Icon.name]: Icon,
      [ImagePreview.Component.name]: ImagePreview.Component
    },
    data() {
      return {
        wxReadyOk:false,
        imgBasePath:''
      };
    },
    methods: {
      imagePreview(row) {
        if (row.source_type == 1) {
          let imags=this.tabList.filter(o => o.source_type == 1);
          let index = findIndex(imags, o => o.id == row.id);
          ImagePreview({
            images: imags.map(o => this.imgBasePath + o.path),
            closeable: true,
            startPosition: index>=0?index:0
          });
        } else if (row.source_type == 2) {
          this.videoshow=true;
          this.videoSrc=this.videoBasePath+row.path;
        }
      },
      wxReadyOkMethod() {
        console.log('js准备好了');
        this.wxReadyOk = true;
      },
      videoFile(e) {
        let file = e.target.files[0];
        console.log('file', file);
        const formData = new FormData();
        formData.append('file', file);
        Toast.loading({ message: "上传中...", forbidClick: true, duration: 1000000 });
        this.$http
          .post(this.$API.LOGIN_VIDEO, formData, {
            headers: {
              'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarybIUBskeGLlxuOBUg'
            }
          })
          .then((res) => {
            console.log('res', res);
            Toast.clear();
            if (res.code == 1) {
              this.$notify({ type: 'success', message: '上传成功' });
              this.videoRead(res.data, file.name);
            } else {
              this.$notify({ type: 'warning', message: res.msg });
            }
          });
      },
      videoRead(path, name) {
        this.$http
          .post(this.$API.UPLOAD_USER_VIDEO_WORKS, {
            active_id: this.active_id,
            signup_id: this.signup_id,
            path: path,
            name: name
          })
          .then((res) => {
            console.log('res', res);
            Toast.clear();
            if (res.code == 1) {
              this.$notify({ type: 'success', message: '上传成功' });
              this.initAjaxMethod();
            } else {
              this.$notify({ type: 'warning', message: res.msg });
            }
          });
      },
      chooseImage() {
        this.chooseshow = false;
        let that = this;
        this.$WX.checkJsApi({
          jsApiList: ['chooseImage', 'getLocalImgData'],
          success: function (res) {
            console.log('res', res);
            if (res.errMsg == "checkJsApi:ok") {
              that.chooseImages();
            }
          }
        });
      },
      chooseImages() {
        let _this = this;
        this.$WX.chooseImage({
          count: 1, // 默认9
          sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            _this.$WX.getLocalImgData({
              localId: res.localIds[0],
              success: function (ress) {
                let bs64 = ress.localData; // localData是图片的base64数据，可以用 img 标签显示
                if (bs64.indexOf('data:image') != 0) {
                  //判断是否有这样的头部，没有就加上
                  bs64 = 'data:image/jpeg;base64,' + bs64;
                }
                let content = bs64.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg');
                _this.afterRead(content);
              }
            });
          }
        });
      },
      afterRead(content) {
        Toast.loading({ message: "上传中...", forbidClick: true, duration: 1000000 });
        this.$http
          .post(this.$API.UPLOAD_USER_WORKS, {
            active_id: this.active_id,
            signup_id: this.signup_id,
            base64_image: content
          })
          .then((res) => {
            console.log('res', res);
            Toast.clear();
            if (res.code == 1) {
              this.$notify({ type: 'success', message: '上传成功' });
              this.initAjaxMethod();
            } else {
              this.$notify({ type: 'warning', message: res.msg });
            }
          });
      }
    },
  };
  </script>
  <style lang="less">
    .img-upload-container{
        width: 1.6rem;
        height: 1.6rem;
        .img-upload-button{
            width: 100%;
            height: 100%;
            border:1px solid #eee;
            border-radius: 6px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            font-weight: bold;
            color:#888;
            position: relative;
            img{
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
            .img-upload-file{
                position: absolute;
                top:0;
                left:0;
                width: 100%;
                height: 100%;
                background: transparent;
                visibility: hidden;
            }
        }
    }
  </style>